﻿@page "/components/card"

<DocsPage>
    <DocsPageHeader Title="Card">
        <Description>
            Cards can contain actions, text, or media like images or graphics. Keeping a card to a single subject keeps the design clean.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader>
                <Title>Simple Card</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <CardSimpleExample />
            </SectionContent>
            <SectionSource Code="CardSimpleExample" GitHubFolderName="Card" ></SectionSource>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Outlined</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <CardOutlinedExample />
            </SectionContent>
            <SectionSource Code="CardOutlinedExample" GitHubFolderName="Card" ></SectionSource>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Header</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <CardHeaderExample />
            </SectionContent>
            <SectionSource Code="CardHeaderExample" GitHubFolderName="Card" >
            </SectionSource>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Media</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <CardMediaExample />
            </SectionContent>
            <SectionSource Code="CardMediaExample" GitHubFolderName="Card" ></SectionSource>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Combined</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <CardCombinedExample />
            </SectionContent>
            <SectionSource Code="CardCombinedExample" GitHubFolderName="Card" ></SectionSource>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>